<template>
  <div>
    <h1>App组件</h1>
    <hr />

    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Game'">游戏</button>
    <button @click="comp = 'Movie'">电影</button>

    <!-- 
      动态组件：我们可以通过component组件的is属性来决定渲染哪一个组件
          component内置组件：渲染一个元组件为动态组件 依is的值来决定哪个组件被渲染
          is属性必须动态绑定，并且值是被动态加载的组件的名称
      -->
    <!-- 
      可以使用keep-alive 组件来缓存组件
       keep-alive包裹动态组件时，默认会缓存所以不活动的组件实例，而不是销毁它们
        include 字符串或正则表达式 只有名称匹配的组件会被缓存
        exclude 字符串或正则表达式 只有名称不匹配的组件会被缓存
        max 数字 最多可以缓存多少组件实例
    -->
    <!-- include的字符串写法 只限制一个 -->
    <!-- <keep-alive include="News">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的字符串写法 限制多个 -->
    <!-- <keep-alive include="News,Movie">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的数组写法 -->
    <!-- <keep-alive :include="['News', 'Movie']">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的正则写法 -->
    <!-- <keep-alive :include="/^News$/g">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- exclude的数组写法 和max最多缓存几个组件 -->
    <keep-alive :exclude="['News']" :max="4">
      <component :is="comp"></component>
    </keep-alive>
  </div>
</template>

<script>
import Game from "@/components/Game";
import Movie from "./components/Movie";
import News from "@/components/News";

export default {
  naem: "App",
  components: {
    Game,
    Movie,
    News,
  },
  data() {
    return {
      comp: "",
    };
  },
};
</script>

<style></style>
